<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>登录</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/login.css">
</head>

<body>
    <div class="one">
        <h1>Welcome!</h1>
        <h1>问卷调查系统</h1>
    </div>

    <div class="two">
        <div class="login" id="app">
            <h3><strong>账号登录</strong></h3>
            <!-- <div v-if="show">
                <show style="color: red;text-align: center;" v-model="msg">{% raw %}{{ msg }}{% endraw %}</p>
            </div> -->

            <label for="userName">
                <input class="input1 layui-icon" type="text" name="userName" key="username"
                    placeholder="&#xe66f;  请输入用户账号" v-model="username">
            </label>
            <label for="password">
                <input class="input2 layui-icon" type="text" name="password" key="password"
                    placeholder="&#xe673;  请输入用户密码" v-model="password">
            </label>
            <br>
            <input type="button" value="登录" class="btn" @click="login">
            <br>
            <a href="/register">点击注册!</a>
        </div>

    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                username: '',
                password: '',
                msg: '',
                show: false
            },
            methods: {
                showmsg: function (msg) {
                    this.msg = msg
                    this.show = true
                },
                // 登录按钮
                login: function () {
                    console.log(211211);
                    let username = this.username.trim();
                    let password = this.password.trim();

                    if (username === "" || password === "") {
                        this.msg = "用户或密码不能为空";
                        this.show = true
                    } else {
                        axios({
                            method: 'post',
                            url: '/loginDeno',
                            data: { username, password }
                        }).then(function (res) {
                            res = res.data;
                            if (res.code == 200) {
                                let msg = res.msg
                                alert(msg)
                                window.location.href = '/index'
                            } else {
                                this.msg = res.msg
                                alert(this.msg)
                                this.show = true
                            }
                        }).catch(function (res) {
                            console.log(res);
                        })
                    }
                }
            },
            watch: {
                msg: function () {
                    setTimeout(() => {
                        this.show = false
                        this.msg = ''
                    }, 3000)
                }
            }
        })
    </script>
</body>

</html>